<template>
    <box left="1440px" top="390px" title="口碑">
        <div class="rightmid">
            <div class="flex data">
                <div class="item flex">
                    <img src="../../../assets/img/home/kb-icon-1.png" alt="" />
                    <div>
                        <p class="val">
                            {{ info.total ? info.total : "" }}
                            <span class="unit">单</span>
                        </p>
                        <div class="flex">
                            <label>总评价量</label>
                        </div>
                    </div>
                </div>
                <div class="item down flex">
                    <img src="../../../assets/img/home/kb-icon-2.png" alt="" />
                    <div>
                        <p class="val">
                            {{ info.bad ? info.bad : "" }}
                            <span class="unit">单</span>
                        </p>
                        <div class="flex">
                            <label>月差评量</label>
                        </div>
                    </div>
                </div>
            </div>
            <my-title title="差评责任位" top="120px"></my-title>
            <div class="wrap flex">
                <div class="chart-wrap">
                    <div class="chart" ref="chart"></div>
                </div>
                <div class="legend flex">
                    <div
                        v-for="(item, index) in info.chartData"
                        :key="`item-${index}`"
                        class="item"
                    >
                        <div>
                            <span class="val">{{ item.value }}</span>
                            <span class="unit">单</span>
                            <!-- <span class="per">占{{ item.percent }}</span> -->
                        </div>
                        <div class="icon-wrap flex">
                            <div
                                class="icon"
                                :style="{ background: colors[index] }"
                            ></div>
                            <span class="label">{{ item.name }}</span>
                        </div>
                    </div>
                </div>
            </div>
            <p class="tip">*仅天猫数据</p>
        </div>
    </box>
</template>

<script>
export default {
    props: {
        info: {},
    },
    components: {},
    data() {
        return {
            colors: [
                "#00ccaa",
                "#00bfff",
                "#1a7bfe",
                "#3344ff",
                "#9522f9",
                "#6317fd",
            ],
        };
    },
    watch: {
        info: {
            handler(newVal) {
                this.chartInit(newVal.chartData);
            },
            deep: true,
        },
    },
    methods: {
        chartInit(DATA) {
            let _chart = this.$echarts.init(this.$refs["chart"]);
            let _option = {
                tooltip: {
                    trigger: "item",
                    formatter: "{b} : {c} ({d}%)",
                },
                series: [
                    {
                        name: "访问来源",
                        type: "pie",
                        radius: "85%",
                        center: ["50%", "50%"],
                        color: this.colors,
                        data: DATA,
                        roseType: "radius",

                        label: {
                            show: true,
                            formatter: "{d}%",
                            fontSize: 8,
                            color: "#fff",
                            position:'inside'
                        },
                        itemStyle: {
                            normal: {
                                shadowColor: "rgba(0, 0, 0, 0.8)",
                                shadowBlur: 50,
                            },
                        },
                    },
                ],
            };
            _chart.setOption(_option);
        },
    },
    created() {},
    mounted() {
        this.chartInit();
    },
};
</script>
<style lang='less' scoped>
.rightmid {
    cursor: pointer;
    .item {
        margin-left: 20px;

        img {
            margin-right: 14px;
        }
        .val {
            font-weight: bold;
            font-size: 20px;
            color: #33bbff;
            margin-bottom: 10px;
            .unit {
                font-size: 12px;
                color: #8fadcc;
            }
        }
        .per {
            font-size: 12px;
            color: #00e5ac;
            margin: 0 4px;
        }
        label {
            font-size: 12px;
            color: #feffff;
        }
        &.down {
            .val {
                color: #ff5959;
            }
        }
    }
    .wrap {
        padding-left: 26px;
        width: 100%;
        height: 150px;
        margin-top: 50px;
        .chart-wrap {
            width: 150px;
            height: 150px;
            background-image: url(../../../assets/img/home/kb-icon-3.png);
            .chart {
                width: 150px;
                height: 150px;
            }
        }
    }
    .legend {
        flex: 1;
        .item {
            .val {
                font-size: 16px;
            }
            .unit,
            .per {
                font-size: 12px;
                color: #8fadcc;
            }
            .icon-wrap {
                margin-top: 6px;
            }
            .icon {
                width: 9px;
                height: 9px;
                margin-right: 4px;
            }
            .label {
                font-size: 16px;
                color: #8fadcc;
            }
        }
    }
    .tip {
        position: absolute;
        bottom: 0;
        right: 0;
        color: #8fadcc;
        font-size: 12px;
    }
}
</style>
